<template>
  <view class="x-list-page">
    <template v-if="showNavbar">
      <slot v-if="customNavbar" name="customNavbar"></slot>
      <navbar v-else v-bind="$attrs" v-on="$listeners"></navbar>
    </template>
    <template>
      <slot v-if="customListSearch" name="customListSearch"></slot>
      <list-search v-else v-bind="$attrs" v-on="$listeners"></list-search>
    </template>
    <template v-if="tabList && tabList.length">
      <u-tabs :list="tabList" :is-scroll="isScroll" :current="current" v-bind="$attrs"  @change="tabChange"> </u-tabs>
    </template>
    <view class="content">
      <x-scroll-view
        ref="myScrollView"
        :scrollTop.sync="scrollTop"
        @scrolltolower="handleNextPage"
        @refresherrefresh="refresherrefresh($event)">
        <template v-if="data.length">
          <view v-for="(item, index) in data" :key="index">
            <slot name="cardItem" :item="item"></slot>
          </view>
        </template>
        <template v-else>
          <slot v-if="customNoDate" name="customNoDate"></slot>
          <no-data v-else v-bind="$attrs"></no-data>
        </template>
      </x-scroll-view>
    </view>
    <slot name="bottom"></slot>
  </view>
</template>

<script>
import Navbar from "./Navbar";
import ListSearch from "./listSearch";
import NoData from "./NoData";
import XScrollView from './x-scroll-view';
export default {
  name: "x-list-page",
  components: {Navbar, ListSearch, NoData, XScrollView},
  props: {
    isScroll: {
      type: Boolean,
      default: false
    },
    /**
     * 自定义navbar
     * */
    customNavbar: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示navbar
     * */
    showNavbar: {
      type: Boolean,
      default: true
    },
    /**
     * 自定义listSearch
     * */
    customListSearch: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示listSearch
     * */
    showListSearch: {
      type: Boolean,
      default: true
    },
    /**
     * 自定义customNoDate
     * */
    customNoDate: {
      type: Boolean,
      default: false
    },
    /**
     * 页签
     * */
    tabList: {
      type: Array,
      default: () => []
    },
    /**
     * 没有下一页提示文字
     * */
    hasNextText: String,
    /**
     * 查询方法
     * 返回【Promise】:
     * resolve({
        list: data.list,
        hasNext: data.hasNext
      })
     * */
    queryData: Function
  },
  data() {
    return {
      data: [],
      scrollTop: -1,
      page: 1,
      current: 0
    }
  },
  methods: {
    tabChange(index) {
      this.data = [];
      this.page = 1;
      this.current = index;
      this.$emit('tabChange', index);
      this.getList();
    },
    // 下拉刷新
    refresherrefresh(call) {
      this.data = [];
      this.page = 1;
      this.getList(call);
    },
    // 上拉加载
    handleNextPage() {
      if (this.hasNext === true) {
        this.page++;
        this.getList();
      } else {
        uni.showToast({
          title: this.hasNextText || '没有更多数据了！',
          icon: 'none'
        });
      }
    },
    getList(call) {
      if (this.queryData) {
        this.queryData({page: this.page}).then(res => {
          this.data = this.data.concat(res.list || []);
          this.hasNext = res.hasNext;
          call && call();
        })
      }
    },
    /**
     * 手动查询数据
     * */
    handleGetList() {
      this.page = 1;
      this.data = [];
      this.getList();
    },
  }
}
</script>

<style scoped lang="scss">
  .x-list-page {
    height: 100%;
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      overflow: hidden;
    }
  }
</style>
